<template>
	<div id="manager">
		<!--  添加弹窗  -->
		<el-dialog :visible.sync="addManager" width="60%" :before-close="handleClose" :title="title">
			<el-form ref="form" :model="form" :visible.sync="addManager" :rules="rules">
				<el-form-item label="编号" prop="id" :rules="[{required:true,message:'请输入管理员编号'}]">
					<el-input placeholder="请输入管理员编号" v-model="form.missid"></el-input>
				</el-form-item>
				<el-form-item label="用户名" prop="admin" :rules="[{required:true,message:'请输入用户名'}]">
					<el-input placeholder="请输入管理员用户名" v-model="form.admin"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password" :rules="[{required:true,message:'请输入密码'}]">
					<el-input placeholder="请输入密码" v-model="form.password"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
		<!--  添加弹窗  -->
		<div class="button">
			<el-button size="mini" type="primary" @click="handleAdd">添加管理员信息</el-button>
		</div>
		<!--  Table表格  -->
		<el-table :data="tableData" style="width:  100%" :header-cell-style="{background:'#2a9fc9'  ,color:'#000000'}">
			<el-table-column align="center" label="编号" prop="id"></el-table-column>
			<el-table-column align="center" label="用户名" prop="admin"></el-table-column>
			<el-table-column align="center" label="密码" prop="password"></el-table-column>
			<el-table-column align="center" label="操作" style="width:30px">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" circle icon="el-icon-delete" @click="handleDel(scope.row)">
					</el-button>
					<el-button type="primary" size="mini" circle icon="el-icon-edit" @click="handleEdit(scope.row)">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import axios from 'axios';
	axios.defaults.baseURL = '/api'
	export default {
		data() {
			return {
				addManager: false,
				tableData: [],
				title: "",
				form: {
					id: "",
					admin: "",
					password: ""
				},
				rules: {
					id: [{
						required: true,
						message: "请输入管理员编号"
					}],
					admin: [{
						required: true,
						message: "请输入账号"
					}],
					password: [{
						required: true,
						message: "请输入密码"
					}],
				},
			}
		},
		methods: {
			handleAdd() {
				this.addManager = true;
				this.title = "添加管理员信息";
			},
			handleClose() {
				this.$refs.form.resetFields();
				this.addManager = false;
			},
			submit() {
				//  TODO:  提交数据到服务器，这里需要您根据实际情况实现，例如使用axios发送请求等。
			},
			cancel() {
				this.handleClose();
			},
			getLesson() {
				axios.get("http://123.57.174.220:8085/getAllManager", {
					params: {
						page: 1,
						pageSize: 10
					}
				}).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.tableData = res.data;
					}
				});
			},
			handleDel(row) {
				axios.delete(`/deleteManager/${row.id}`).then((res) => {
					console.log(res);
					if (res.status === 200) {
						this.getLesson()
					}
				});
			},
			handleEdit(row) {
				//  TODO：根据实际情况修改参数名称和行为。这里仅为示例。
				this.title = "编辑";
				this.form = row;
				//  this.form=JSON.parse(JSON.stringify(row));
				this.addManager = true;
			}
		},
		mounted() {
			this.getLesson();
		}
	}
</script>
<style scoped>
	.button {
		margin-bottom: 15px;
	}
</style>
